<!-- created:2022/12/17 23:09 By AdinZ -->
<template>
  <div class="management">
    <TablePage :query="query" :columns="columns" :data="data" @onLoad="onload"/>

  </div>
</template>

<script>
import TablePage from "@/components/TablePage";

export default {
  components: {TablePage},
  name: "management",
  data() {
    return {
      query: [
        {
          type: 'buttons',
          label: '',
          buttons: [
            {
              type: 'primary',
              circle: true,
              styles: {},
              icon: 'Plus',
              callback: () => {
                this.$api.message('add')
              }
            }
          ]
        }
      ],
      columns: [
        {
          label: '#',
          prop: '$index',
          width: '80px'
        },
        {
          label: '登陆账号',
          prop: 'username',
          width: '180px'
        },
        {
          label: '角色',
          prop: 'role',
          width: '180px'
        },
        {
          label: '管理姓名',
          prop: 'realname',
          width: '180px'
        },
        {
          label: '管理电话',
          prop: 'mobile',
          width: '180px'
        },
        {
          label: '管理邮箱',
          prop: 'email',
          width: '180px'
        },
        {
          label: '状态',
          type: 'render',
          width: '100px',
          render: (data) => {
            if (data.state == 0)
              return `<span class="el-tag el-tag--dark mx-1 is-round"><span class="el-tag__content">正常</span></span>`
            else return `<span class="el-tag el-tag--danger el-tag--dark mx-1 is-round"><span class="el-tag__content">隐藏</span> </span>`
          },
        },
        {
          label: '创建时间',
          prop: 'created',
          width: '180px',
          type: 'date'
        },
        {
          label: '登陆ip',
          prop: 'ip',
          width: '180px',
        },
        {
          label: '管理',
          type: 'buttons',
          width: '180px',
          buttons: [
            {
              label: '修改',
              type: 'primary',
              styles: {},
              icon: 'Edit',
              callback: (data) => {
                alert('回调' + JSON.stringify(data))
              }
            },
            {
              label: '删除',
              type: 'danger',
              styles: {},
              icon: 'Delete',
              callback: (data) => {
                alert('回调' + JSON.stringify(data))
              }
            }
          ]
        }
      ],
      data: {
        total: 0,
        list: [],
        page: 1,
        size: 40
      },
    }
  },
  created() {
  },
  methods: {
    onload(data) {
      this.data.page = data.page;
      this.data.size = data.size;
      this.$api.apiQuery('/api/manage/system/admin/', data).then((res) => {
        this.data.list = res.data
        this.data.total = res.total
      })
    }
  }
}
</script>

<style scoped lang="scss">
.management {

}
</style>
